<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p id="speech"></p>
<p id="answer"></p>
<script>
    // document.querySelector("#startBtn").addEventListener("click", function () {
        const eventSource = new EventSource('/speech');
        // 接收转录结果并显示
        eventSource.addEventListener('transcription', (event) => {
            console.log('实时转录:', event.data);
            document.querySelector("#speech").innerHTML = document.querySelector("#speech").innerHTML + event.data;
        });


        // 处理完成
        eventSource.addEventListener('end', () => {
            console.log('处理完成');
            eventSource.close();
            fetchData("/hig?message="+document.querySelector("#speech").innerHTML);
        });

        // 处理错误
        eventSource.onerror = (error) => {
            console.error('发生错误:', error);
            eventSource.close();
        };
    // });

    function fetchData(url) {

        // 调用 `fetch()`，传入 URL。
        fetch(url)
            // fetch() 返回一个 promise。当我们从服务器收到响应时，
            // 会使用该响应调用 promise 的 `then()` 处理器。
            .then((response) => {
                // 如果请求没有成功，我们的处理器会抛出错误。
                if (!response.ok) {
                    throw new Error(`HTTP 错误：${response.status}`);
                }
                // 否则（如果请求成功），我们的处理器通过调用
                // response.text() 以获取文本形式的响应，
                // 并立即返回 `response.text()` 返回的 promise。
                return response.text();
            })
            // 若成功调用 response.text()，会使用返回的文本来调用 `then()` 处理器，
            // 然后我们将其拷贝到 `poemDisplay` 框中。
            .then((text) => {document.querySelector("#answer").innerHTML=text;fecthAudio("/audio?message="+text)})
            // 捕获可能出现的任何错误，
            // 并在 `poemDisplay` 框中显示一条消息。
            .catch((error) => (document.querySelector("#answer").value = `获取失败：${error}`));

    }

    function fecthAudio(url) {

        // 调用 `fetch()`，传入 URL。
        fetch(url)
            // fetch() 返回一个 promise。当我们从服务器收到响应时，
            // 会使用该响应调用 promise 的 `then()` 处理器。
            .then((response) => {
                // 如果请求没有成功，我们的处理器会抛出错误。
                if (!response.ok) {
                    throw new Error(`HTTP 错误：${response.status}`);
                }
                // 否则（如果请求成功），我们的处理器通过调用
                // response.text() 以获取文本形式的响应，
                // 并立即返回 `response.text()` 返回的 promise。
                return response.text();
            })
            // 若成功调用 response.text()，会使用返回的文本来调用 `then()` 处理器，
            // 然后我们将其拷贝到 `poemDisplay` 框中。
            .then((text) => (alert("转换成语音成功")))
            // 捕获可能出现的任何错误，
            // 并在 `poemDisplay` 框中显示一条消息。
            .catch((error) => (alert(`获取失败：${error}`) ));

    }
</script>
</body>
</html>
